<template>
  <el-row style="margin-top: 5rem">
    <el-col :span="4"></el-col>
    <el-col :span="16">
      <el-divider style="margin: 5rem 0" content-position="left"><h1>欢迎使用抽子面试题-(前端)-分享</h1></el-divider>
      <el-timeline>
        <el-timeline-item :timestamp=item.create_time placement="top" v-for="(item,index) in articleList.tableData" :key="index">
          <el-card style="padding: 0.6rem;"  >
            <div style="display: flex;flex-direction: column;gap: 0.8rem">
              <div style="display: flex;align-items: center;gap: 1rem">
                <h4>{{item.article_title}}</h4>
                <el-tag style="padding: 2px" v-for="(itemTag,indexTag) in item.article_tips_ids" :key="indexTag">{{ itemTag }}</el-tag>
              </div>
              <p>点击量：{{item.page_view}}</p>
              <p>
                <el-link type="success" @click="getInfo(item)">查看</el-link>
              </p>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <div class="fg"></div>
      <el-pagination background layout="prev, pager, next"
                     :page-size = 5
                     @next-click = "nextClick"
                     @prev-click = "prevClick"
                     @current-change="currentChange"
                     :total=total.total />
    </el-col>
    <el-col :span="4">
      <el-affix position="bottom" :offset="20">
        <el-button type="primary" style="padding: 16px 32px" @click="gzClick">@zlhranhou</el-button>
      </el-affix>
    </el-col>
  </el-row>
  <el-dialog
      v-model="dialogVisible"
      width="60%"
      :before-close="handleClose"
  >
    <div style="display: flex;gap: 50px;flex-direction: column;justify-self: center">
    <el-divider border-style="dashed" ontent-position="right"><h3>{{ dialogData.title }}</h3></el-divider>
    <v-md-editor :model-value="previewData" mode="preview"></v-md-editor>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false" style="padding: 16px 32px">关闭</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog
      v-model="jrVis"
      title="加入讨论"
      width="30%"
  >
    <div style="display: flex;justify-content: center">
      <img src="../../public/ewm.jpg" style="max-height: 600px" alt="">
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import {reactive, ref,} from 'vue'
import article from '@/api/article.js'
import { ElMessage,ElMessageBox,ElNotification  } from 'element-plus'

let page = 1;
let total = reactive({
  total:0
})

const previewData = ref("");

const dialogVisible = ref(false)
const jrVis = ref(false)

function gzClick(){
  jrVis.value = true
}

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确认要关闭吗？')
      .then(() => {
        done()
        getArticleList(page);
      })
      .catch(() => {
        // catch error
      })
}

let dialogData = reactive({
  'title':"详情",
  'time':"-",
})

function getInfo(row:any){
  dialogData.title = row.article_title
  dialogData.time = row.create_time
  previewData.value = row.article_content
  article.articlePageView(row.article_id);
  dialogVisible.value=true;
}



getData();
function getData(){
  getArticleList(page);
}


let articleList = reactive({
  tableData:[],
  selectData:[],
  tips:[]
})

function getArticleList(page: number){
  let args = {
    current_page:page
  }
  article.getArticleList(args)
      .then((res: any) => {
        if(res.ok === "ok"){
          articleList.tableData = res.data.data
          total.total = res.data.total
        }
      })
      .catch((error: any)=>{
        console.log(error);
        ElNotification({
          title: '提示',
          message: "网络链接错误",
        })
      })
}

function nextClick(cur_page:number){
  if(cur_page < total.total){
    page++;
    getArticleList(page)
  }
}

function prevClick(cur_page:number){
  if(cur_page > 1){
    page--;
    getArticleList(page)
  }
}

function currentChange(cur_page:number){
  page = cur_page
  getArticleList(page)
}

</script>

<style scoped>
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .fg{
    margin:2rem 0;
  }
</style>
